<template>
  <div>
    <div class="handle-box" style="margin: 20px 0">
      <el-input v-model="purchaseMesName" placeholder="供应商" style="width: 200px;margin: 0 20px"></el-input>
      <el-date-picker type="date" v-model="startTime" value-format="YYYY-MM-DD" placeholder="起始日期"
                      style="width: 200px;margin-right: 20px"></el-date-picker>
      <el-date-picker type="date" v-model="endTime" value-format="YYYY-MM-DD" placeholder="结束日期"
                      style="width: 200px;margin-right: 20px"></el-date-picker>
      <el-button type="primary" v-on:click="info()"><el-icon class="el-icon--left"><Search /></el-icon>查询</el-button>
    </div>

    <el-table :data="tableData" border stripe header-cell-class-name="table-header">
      <el-table-column prop="purchaseMesName" label="供应商名称"></el-table-column>
      <el-table-column prop="purchaseBuyer" label="采购员"></el-table-column>
      <el-table-column prop="purchaseMesDate" label="采购时间"></el-table-column>
      <el-table-column label="查看详情">
        <template #default="scope">
          <el-button type="primary" @click="goPurchaseDetails(scope.row)"><el-icon class="el-icon--left"><Search /></el-icon>查看采购详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--查看采购详情-->
    <el-dialog v-model="dialogVisibleDetails" title="采购信息详情" width="50%">
      <div>
        <p style="margin: 30px 0"><span
            style="margin-right: 30px">供应商名称</span>{{ this.purchaseDetails.purchaseMesName }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">采购员</span>{{ this.purchaseDetails.purchaseBuyer }}
        </p>
        <p style="margin: 30px 0"><span
            style="margin-right: 30px">采购时间</span>{{ this.purchaseDetails.purchaseMesDate }}</p>

        <el-table :data="tableDataDetails" border stripe header-cell-class-name="table-header">
          <el-table-column prop="purchaseDetailsName" label="商品名称"></el-table-column>
          <el-table-column prop="purchaseDetailsBrand" label="品牌"></el-table-column>
          <el-table-column prop="purchaseDetailsPrice" label="采购价"></el-table-column>
          <el-table-column prop="purchaseDetailsNumber" label="采购数量"></el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleDetails=false">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!--分页-->
    <el-pagination style="width:400px;margin: 30px auto" v-model:page-size="pageSize" v-model:current-page="curPage"
                   :total="total" background @current-change="info"></el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "purchaseMes",
  created() {
    this.info()
  },
  data() {
    return {
      tableData: [],
      pageSize: 4,
      curPage: 1,
      total: 0,
      purchaseMesName: '',
      startTime: '',
      endTime: '',
      dialogVisibleDetails: false,
      purchaseDetails: {},
      tableDataDetails: [],
    }
  },
  methods: {
    info() {
      let param = {
        "curPage": this.curPage,
        "pageSize": this.pageSize,
        "startTime": this.startTime,
        "endTime": this.endTime,
        data: {"purchaseMesName": this.purchaseMesName}
      }
      let config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      axios.post('/api/purchaseMes/info', param, config).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    goPurchaseDetails(row) {
      this.dialogVisibleDetails = true
      this.purchaseDetails = {
        purchaseMesName: row.purchaseMesName,
        purchaseBuyer: row.purchaseBuyer,
        purchaseMesDate: row.purchaseMesDate,
      }
      axios.get('/api/purchaseDetails/info?fkId='+row.purchaseMesId,null).then(response=>{
        this.tableDataDetails = response.data
      })
    },
  }
}
</script>

<style scoped>

</style>